<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
		<title>sticky-footer底部按钮位置固定实例</title>
		<style type="text/css">
			html,
			body {
				padding: 0;
				margin: 0;
				height: 100%;
			}
			
			.parent-wrapper {
				min-height: 100%;/*这里一定要写成最小高度，否则没有任何效果*/
				padding-bottom: -60px;/*60px为底部的按钮和距离底部的距离*/
			}
			
			.footer-btn  {
				margin-bottom: 60px;/*60px为底部的按钮和距离底部的距离*/
			}
		</style>
	</head>

	<body>
		<div class="parent-wrapper">
			<div class="parent-main">
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>
				<p class="content">a</p>

			</div>
		</div>
		<!--假设底部按钮的高度是30px，距离低端的距离是30px-->
		<div class="footer-btn">
			<button value="a">我是按钮</button>
		</div>
	</body>

</html>